<template>
  <div class="quality-check p-4">
    <!-- 页面标题 -->
    <div class="mb-4">
      <h2 class="text-lg font-medium">质量检测</h2>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-4 gap-4 mb-6">
      <ArtStatsCard
        icon="i-carbon-rule"
        title="检测规则总数"
        :count="156"
        description="本月新增 12"
        iconColor="#fff"
        iconBgColor="#409EFF"
      />
      <ArtStatsCard
        icon="i-carbon-warning"
        title="违规记录总数"
        :count="2451"
        description="本月新增 245"
        iconColor="#fff"
        iconBgColor="#E6A23C"
      />
      <ArtStatsCard
        icon="i-carbon-data-check"
        title="检测数据量"
        :count="15789"
        description="本月新增 1,234"
        iconColor="#fff"
        iconBgColor="#67C23A"
      />
      <ArtStatsCard
        icon="i-carbon-chart-average"
        title="合格率"
        :count="98.5"
        description="环比上升 2.1%"
        iconColor="#fff"
        iconBgColor="#F56C6C"
        unit="%"
      />
    </div>

    <!-- 按规则统计检测项 -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-base font-medium">按规则统计检测项</h3>
        <el-radio-group v-model="timeRange" size="small">
          <el-radio-button label="week">本周</el-radio-button>
          <el-radio-button label="month">本月</el-radio-button>
          <el-radio-button label="year">本年</el-radio-button>
        </el-radio-group>
      </div>
      <div class="h-80">
        <ArtBarChart
          :data="checkStatistics.data"
          :xAxisData="checkStatistics.categories"
          :loading="loading"
          :title="'检测统计'"
        />
      </div>
    </div>

    <!-- 违规数TOP10表 -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-base font-medium">违规数TOP10表</h3>
        <el-button type="primary" size="small" @click="refreshTop10">
          <div class="i-carbon-refresh mr-1" />
          刷新
        </el-button>
      </div>
      <ArtTable :data="top10List" :loading="loading" border stripe>
        <el-table-column type="index" label="排名" width="80" align="center" />
        <el-table-column prop="tableName" label="表名" min-width="200" show-overflow-tooltip />
        <el-table-column prop="violationCount" label="违规数" width="120" align="center" sortable>
          <template #default="scope">
            <span class="text-red-500">{{ scope.row.violationCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="checkRule" label="检测规则" min-width="200" show-overflow-tooltip />
        <el-table-column prop="lastCheckTime" label="最后检测时间" width="180" align="center" sortable />
        <el-table-column label="趋势" width="180" align="center">
          <template #default="scope">
            <ArtLineChartCard
              :isMiniChart="true"
              :value="scope.row.violationCount"
              :chartData="scope.row.trend"
              height="40px"
              :showLabel="false"
            />
          </template>
        </el-table-column>
      </ArtTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 时间范围选择
const timeRange = ref('month')

// 加载状态
const loading = ref(false)

// 检测统计数据
const checkStatistics = ref({
  categories: ['数据完整性', '数据准确性', '数据一致性', '数据及时性', '数据唯一性'],
  data: [156, 120, 95, 85, 75]
})

// TOP10违规数据
const top10List = ref([
  {
    tableName: 'GXXX0101[学校基本数据子类表1]',
    violationCount: 156,
    checkRule: '必填字段检查',
    lastCheckTime: '2023-06-12 16:07:29',
    trend: [120, 132, 101, 134, 90, 156]
  },
  {
    tableName: 'GXXX0150[学生信息表]',
    violationCount: 89,
    checkRule: '数据格式检查',
    lastCheckTime: '2023-06-12 15:07:29',
    trend: [65, 78, 82, 85, 87, 89]
  }
])

// 刷新TOP10数据
const refreshTop10 = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 监听时间范围变化
const handleTimeRangeChange = () => {
  loading.value = true
  setTimeout(() => {
    // 模拟数据更新
    checkStatistics.value = {
      categories: ['数据完整性', '数据准确性', '数据一致性', '数据及时性', '数据唯一性'],
      data: [Math.floor(Math.random() * 100 + 100), 120, 95, 85, 75]
    }
    loading.value = false
  }, 500)
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.quality-check {
  .el-card {
    margin-bottom: 1rem;
  }
}
</style> 